<template>
	<view class="content" style="height: 100vh;">

		<view class="dis_f  mian mt20">
			<image :src="datas.imgs[0].img" mode="aspectFill" class="showimg"></image>
			<view class="ml20" style="width: 80%;">
				<view class="oh2 fs28">
					{{datas.main_title}}
				</view>
				<view class="table mt10 dis_f aic juc">
					{{datas.goods_type_cn}}
				</view>
				<view class=" mt40 dis_f aic jub">
					<view class="dis_f aic ">
						<text class="fs28 cred">¥{{datas.selling_price}}</text>
						<view class="fs24 ml20" style="color: #f6b542;" v-if="datas.goods_type == 1">
							送{{datas.cpa}}积分
						</view>
						<view class="fs24 ml20" style="color: #f6b542;" v-if="datas.goods_type == 2">
							送{{datas.cps}}余额
						</view>
					</view>
					<text class="fs26">x1</text>
				</view>
			</view>
		</view>
		<view class="dis_f aic mian mt20">
			<view class="fs30">
				备 注
			</view>
			<input type="text" style="font-size: 26rpx;" placeholder="请输入备注信息" placeholder-class="cbd fs26"
				v-model="remark">
		</view>
		<view class="dis_f aic mian jub " v-if="datas.goods_type == 1">
			<text class=" fs30"> 是否是新卡</text>
			<radio-group v-model="is_newcard" class="radio-group" @change="radioChangemxx">
				<label class="radio ml30" v-for="(item, index) in radiolist" :key="item.value">
					<radio :value="item.value" :checked="item.checked" /> {{item.value}}
				</label>
			</radio-group>
		</view>
		<view class="dis_f aic mian " v-if="datas.goods_type == 1 && is_newcard == 0">
			<view class="fs30">
				卡号
			</view>
			<input type="number" style="font-size: 26rpx;" placeholder="请输入卡号" placeholder-class="cbd fs26"
				v-model="card_sn">
		</view>
		<view class="dis_f aic mian jub " style="padding: 25rpx 25rpx 0;">


			<u-checkbox-group v-model="radiovalue1" iconPlacement="right" placement="row">
				<u-checkbox activeColor="#feb746" width="650" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="mian cred fs26">
			总余额:{{user_balance}}
		</view>
		<view class="fonotr dis_f aic jub">
			<view class="dis_f aic juc fs30 ml20">
				<text>合计：</text>
				<view class="cred ml10">￥{{pricemxx}}</view>
			</view>

			<view class="dis_f aic juc cf" style="width:250rpx ;height: 100%;background: #feb746;" @click="jump">
				立即支付
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pricemxx:0,		
						user_balance:0,
				id: "",
				nummxx: "",
				guiprice: "",
				guititle: "",
				datas: "",
				list: "",
				radiolist: [{
						value: '是'
					},
					{
						value: '否',
						checked: 'true'
					},
				],
				addid: undefined,
				radiolist1: [{
						name: '余额抵扣',
						disabled: true
					},


				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '余额支付',
				radiovaluenum: 1,
				is_newcard: 0,
				attrs_id: "",
				remark: "",
				card_sn: undefined,
				code: ""
			}
		},
		onLoad(option) {

			this.id = option.id
			this.attrs_id = option.attrsid
			this.postlist()
		},
		onShow(option) {
			console.log('===========option', option)
			if (option) {
				this.addid = option.id
				console.log(this.addid)
				this.addlist()
			}

		},
		methods: {
			radioChangemxx(n) {
				console.log('radioChange', n.detail.value);
				if (n.detail.value == '否') {
					this.is_newcard = 0
				}
				if (n.detail.value == '是') {
					this.is_newcard = 1
				}
			},
			radioChange(n) {
				console.log('radioChange', n);
				if (n) {
					if( parseFloat(this.user_balance) >=  parseFloat(this.pricemxx)) {
						this.pricemxx =0
					}else {
						this.pricemxx = parseFloat(this.pricemxx) - parseFloat(this.user_balance)
					}
					this.radiovaluenum = 1
				} else {
					this.pricemxx = this.datas.selling_price
					this.radiovaluenum = 0
				}
			},
			jump() {
				let that = this

				console.log(this.list)
				if (this.datas.goods_type == 1 && this.is_newcard == 0 && this.card_sn == undefined) {
					uni.showToast({
						title: '请输入充值卡号',
						icon: "none"
					})
					return false
				}
				wx.login({
					success: async (res) => {
						that.code = res.code
						uni.setStorageSync("code", res.code);
						that.api.post('order/createOrder', {
							attr_id: that.attrs_id,
							type: that.radiovaluenum,
							remark: that.remark,
							is_newcard: that.is_newcard,
							card_sn: that.card_sn,
							code: that.code
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								if (res.data.is_pay == 0) {
									uni.requestPayment({
										provider: 'wxpay', // 服务提提供商
										timeStamp: res.ext.paymsg
											.timeStamp, // 时间戳 142326201502031615
										nonceStr: res.ext.paymsg.nonceStr, // 随机字符串
										package: res.ext.paymsg.package,
										signType: res.ext.paymsg.signType, // 签名算法
										paySign: res.ext.paymsg.paySign, // 签名
										success: function(res) {
											console.log('支付成功', res);
											uni.showToast({
												title: '下单成功',
												icon: "none"
											})
											setTimeout(function() {
												uni.reLaunch({
													url: '/pagesA/my_user_orderlist/my_user_orderlist'
												})
											}, 1000)
											// 业务逻辑。。。
										},
										fail: function(err) {
											console.log('支付失败', err);
											uni.showToast({
												title: '下单失败',
												icon: "none"
											})
											setTimeout(function() {
												uni.reLaunch({
													url: '/pagesA/my_user_orderlist/my_user_orderlist'
												})
											}, 1000)
										}
									});
								} else {
									uni.showToast({
										title: '下单成功',
										icon: "none"
									})
									setTimeout(function() {
										uni.reLaunch({
											url: '/pagesA/my_user_orderlist/my_user_orderlist'
										})
									}, 1000)
								}

							} else if (res.code == 157) {
								uni.showToast({
									title: '余额不足,请充值',
									icon: "none"
								})
								setTimeout(function() {
									uni.navigateTo({
										url: '/pagesA/my_user_Recharge/my_user_Recharge'
									})
								}, 1000)

							}


						})
					}
				})


			},
			addcli() {
				uni.navigateTo({
					url: '/pagesA/my_user_addresslist/my_user_addresslist'
				})
			},
			postlist() {
				let that = this

				that.api.post('index/goodsDetails', {
					id: this.id,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {

						this.datas = res.data
						this.user_balance = res.ext.user_balance
						this.pricemxx = res.data.selling_price
					}


				})
			},
			addlist() {
				let that = this
				let datastyp = {}
				if (this.addid) {
					datastyp = {
						type: 'find',
						id: this.addid
					}
				} else {
					datastyp = {
						type: 'find',
						ism: 1,
						id: this.addid
					}
				}

				that.api.post('user/addressSet', datastyp).then(res => {
					console.log(res);
					if (res.code == 200) {

						that.list = res.data
					}


				})
			},
		}
	}
</script>

<style>
	.table {
		font-size: 24rpx;
		font-family: AlibabaPuHuiTi_3_55_Regular;
		font-weight: 400;
		color: #FF9A17;
		width: 110rpx;
		height: 30rpx;
		border: 1px solid #FF9A17;
		border-radius: 8rpx;
	}

	.fonotr {
		position: fixed;
		left: 0;
		bottom: 0;

		height: 111rpx;
		background: #FFFFFF;
		width: 100%;

	}

	input {
		padding-left: 25rpx;
	}

	.showimg {
		width: 170rpx;
		height: 170rpx;
		border-radius: 11rpx;
	}

	.mian {
		background: #FFFFFF;
		/* width: 100%; */
		padding: 25rpx;
		box-sizing: border-box;
	}
</style>